<template>
    <div class="product-wrap">
        <van-nav-bar class="header fixed" :title="goodsInfo.sort_title" left-text="返回" left-arrow @click-left="navBack" style="z-index: 99" />
        <van-swipe :autoplay="3000" indicator-color="white" style="top: 44px;">
            <van-swipe-item v-for=" (image,index) in images " :key="index">
                <img style="height: 350px;width: 100%;" :src="image">
            </van-swipe-item>
        </van-swipe>
        <div v-if="images == null" style="width: 100%;height:300px;line-height: 300px;">
            <h1 style="text-align:center;">暂无图片</h1>
        </div>
        <div class="product-info clearfix">
            <div class="msg l">
                <!-- {{ goodsInfo }} -->
                <span class="price">¥{{ goodsInfo.price }}</span>
                <span class="original_price">¥{{ goodsInfo.original_price }}</span>
            </div>
            <div class="like r">
                <div class="item">
                    <van-icon name="like-o" @click="like" /><span>关注</span>
                </div>
            </div>
        </div>
        <div class="title">{{ goodsInfo.title}}</div>
        <div class="sub-title">
            <p v-if="goodsInfo">{{ goodsInfo.sort_title }}</p>
        </div>
        <van-cell-group>
            <!-- <van-cell>
                <div slot="title">
                    <span style="color: #999">已选</span>
                    <span>黑色</span>
                </div>
                <van-icon slot="right-icon" name="ellipsis" style="line-height: inherit;" />
            </van-cell> -->
            <van-cell>
                <div slot="title" class="detail_serve_item">
                    <van-icon name="checked" />平台发货 & 商家发货
                </div>
                <van-icon slot="right-icon" name="ellipsis" style="line-height: inherit;" />
            </van-cell>
        </van-cell-group>

         <div class="store" v-if="storeInfo">
            <van-row>
                <van-col span="4">
                    <van-image round width="50" height="50" :src="storeInfo.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'" />
                </van-col>
                <van-col span="20">
                    <div class="title">{{ storeInfo.title }}</div>
                    <div class="name">店铺等级
                        <van-rate :value="storeInfo.vip " size="10" color="#e93b3d" readonly /> </div>
                </van-col>
            </van-row>
            <!-- <van-row class="info">
                <van-col span="7">
                    <p>385</p>
                    <p>粉丝人数</p>
                </van-col>
                <van-col span="7">
                    <p>385</p>
                    <p>全部人数</p>
                </van-col>
                <van-col class="info" span="10">
                    <p>123</p>
                    <p>121</p>
                    <p>12132</p>
                </van-col>
            </van-row> -->
            <!-- <van-row class="store-tool">
                <van-col span="12">
                    <van-button icon="star-o" size="mini">关注店铺</van-button>
                </van-col>
                <van-col span="12">
                    <van-button icon="star-o" size="mini">进入店铺</van-button>
                </van-col>
            </van-row> -->
        </div>


        <van-tabs v-model="active">
            <van-tab title="商品介绍">
                <div style="hieght: 100px;width: 96%;padding: 5px 10px;" v-html="goodsInfo.remark"></div>
            </van-tab>
            <van-tab title="产品规格">
                <van-cell :title="item.title" :value="item.value"  v-for="(item,index) in params" :key="index"/>
            </van-tab>
             <van-tab title="售后保障" style="background-color: white;padding:10px 15px;">
        <van-divider>权利声明</van-divider>
        <p style="display: block;">无忧商城上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是无忧商城重要的经营资源，未经许可，禁止非法转载使用。</p>
        <van-divider>价格声明</van-divider>
        <p>商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。</p>
      </van-tab>
        </van-tabs>
        <!-- Start 商店信息 store -->
        <div class="footer fixed" style="z-index: 99">
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" @click="getservice" />
                <!-- <van-goods-action-icon icon="cart-o" text="购物车" @click="cart" /> -->
                <van-goods-action-button type="warning" text="进入店铺" @click="getStore" />
                <van-goods-action-button type="danger" text="立即购买" @click="getcart" />
            </van-goods-action>
        </div>
        <van-sku
          v-model="selectCartShow"
          :sku="sku"
          :goods="goodsInfo"
          :goods-id="goodsInfo.id"
          :hide-stock="hide_stock"
          @buy-clicked="getBuy"
          @add-cart="onAddCartClicked"
          :show-add-cart-btn="false"
        />
    </div>
</template>

<script>
import { Toast } from 'vant';
import { Lazyload } from 'vant';
import { Sku } from 'vant';
import goodsVue from '../store/mine/goods.vue';
export default {
    name: "integral",
    inject: ['reload'],
    data() {
        return {
            active: 0,
            goodsInfo: null,
            storeInfo: null,
            images: [],
            cartData:[],
            selectCartShow:false,
            sku:{
              tree: [
              ],
              // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
              list: [
              ]
            },
            params:[],
            goodsId:1,
            hide_stock:false
        };
    },
    created() {
        this.store_id = this.global.state.productMerchant_store_id;
        this.getStoreInfo();
        this.cartData = this.$store.state.cartData;
        this.images = JSON.parse(this.global.state.productMerchant_goods.images);
        this.goodsInfo = this.global.state.productMerchant_goods;
        this.goodsInfo.picture = this.goodsInfo.avatar;
        this.params = JSON.parse(this.goodsInfo.params);
        this.formatType(this.goodsInfo.type);
        this.sku.price = this.goodsInfo.price;
        this.sku.stock_num = this.goodsInfo.is_inventory ? this.goodsInfo.inventory : 9999;
        if(typeof(this.goodsInfo.type) != 'object'){
          this.sku.collection_id = this.goodsInfo.id;
          this.sku.none_sku = true
        }
        this.formatPrice(this.goodsInfo.spec_price,'price');
    },
    methods: {
        getStoreInfo(){
            this.axios.get('/api/store/user/store_info/'+this.store_id).then(r=>{
                this.storeInfo = r.data.data;
            }).catch(err=>{
                console.log(err)
            })
        },
        formatPrice(data,type){
          let newData = [];
          Object.keys(data).forEach((key)=>{
            let spec = data[key].spec.substring(0,data[key].spec.length-1)
            let specData = spec.split(',');
            if(type === 'price'){
              let si = {
                id:data[key].id,
                price: data[key].price * 100,
                stock_num: data[key].count ? data[key].count : 999
              }
              specData.forEach((v,i)=>{
                si['s'+i] = v;
              }) 
               newData.push(si);
            }
          })
           this.sku.list = newData;
        },
        formatType(data){
          let newData = [];
          Object.keys(data).forEach((key)=>{
            let spec =[];
            Object.keys(data[key].spec).forEach((i)=>{
              let sp = {
                id:data[key].spec[i].title,
                name:data[key].spec[i].title
              } 
              spec.push(sp)
            })
            let item = {
              k:data[key].title,
              v:spec,
              k_s:'s'+key
            }
            newData.push(item)
          })
          this.sku.tree = newData;
        },
        navBack() {
            this.$router.go(-1);
        },
        getservice() {
            //客服
            Toast('暂无此功能');
        },
        getcart() {
            this.selectCartShow = true;
        },
        getBuy(e) {
            this.global.state.BuyGoodsData = e;
            let goodsInfo = this.goodsInfo;
            goodsInfo.number = e.selectedNum;
            this.global.state.singleGoods = goodsInfo;
            this.global.state.singleGoods.store_vip = this.storeInfo.vip;
            this.$router.push({ name: 'orderSubmit', path: '../order/submit',query:{good: e.selectedSkuComb ? true : false}});
        },
        cart() {
            this.$router.push({ name: 'cart', path: '../cart' });
        },
        onAddCartClicked(item){
            this.selectCartShow = false;
            item.goodsInfo = this.goodsInfo;
            item.store = this.storeInfo;
            if(item.selectedSkuComb){
              item.checkSpec = item.selectedSkuComb;
              item.collection_id = item.selectedSkuComb.id;
            }else{
              item.collection_id = this.goodsInfo.id;
            }
            
            item.number = item.selectedNum ? item.selectedNum :1
            this.$store.commit('addcartGoods', item);
            Toast.success('添加成功');
            
        },
        getData(){

        },
        getStore(){
          this.global.state.productMerchant_store = this.storeInfo;
          this.$router.push({path:'../store/'})
        },
        async like(){
            let params = {
                id: this.goodsInfo.id,
                token: sessionStorage.getItem('token')
            };
            const res = await this.axios.post('/api/store/user/favorite/create/Good',params);
            Toast(res.data.message);
        }
    }
};
</script>
<style scoped>
.product-wrap {
    padding-bottom: 100px;
}

.product-wrap .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0
}

.product-wrap .title {
    font-size: 15px;
    font-weight: 600;
    padding: 0 12px;
    background: white;
    box-sizing: border-box;
}

.product-wrap .sub-title {
    font-size: 12px;
    padding: 0 12px;
    background: white;
    box-sizing: border-box;
    color: #999;
    margin-bottom: 5px;
}

.product-wrap .sub-title p {
    padding: 0.25rem 0;
    margin: 0;
}

.product-info {
    margin: 50px 0 0 0;
    box-sizing: border-box;
    padding: 10px 12px;
    background: white;
    line-height: 24px;
}

.product-info .like {
    max-width: 150px;
}

.product-info .msg .price {
    font-size: 24px;
    line-height: 24px;
    color: #ff4240;
}

.product-info .msg .original_price {
    text-decoration: line-through;
    color: #999;
}

.product-info .item {
    text-align: center;
    display: inline;
    margin: 0 5px;
    line-height: 12px;
}

.product-info .item span {
    color: #999;
    font-size: 12px;
}

.product-info .item p {
    margin: 0;
}

.detail_serve_item i {
    color: #ff4240;
}

.evaluate-header {
    background: white;
    padding: 0 12px 5px;
}

.evaluate-header-item {
    margin: 0 10px 10px 0;
    background: #fdf0f0;
    display: inline-block;
    margin: 5px 5px 0 5px;
    padding: 0 10px;
    height: 25px;
    border-radius: 3px;
    line-height: 25px;
    font-size: 10px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
}

.evaluate-item {
    box-sizing: border-box;
    padding: 0 12px;
    margin: 10px 0 5px;
}

.evaluate-item-header,
.evaluate-item-header .time {
    line-height: 20px;
}

.evaluate-item-header .name,
.evaluate-item-header .i {
    padding-left: 5px;
    vertical-align: 50%;
}

.evaluate-item-header .van-rate {
    padding-left: 5px;
    display: inline-block;
    vertical-align: 50%;
}

.evaluate-item-container p {
    margin: 0;
}

.evaluate-item-container img {
    display: inline-block;
    max-width: 19%;
    margin-right: 1%;
}

.product-wrap .all {
    text-align: center;
}

.product-wrap .all span {
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid #666;
    line-height: 14px;
    vertical-align: 70%;
}

.product-wrap .store {
    box-sizing: border-box;
    background: white;
    padding: 5px 12px;
    margin: 5px 0;
}

.store .title {
    padding: 0;
}

.store .name div {
    display: inline-block;
}

.store .info div p {
    margin: .25rem 0;
    text-align: center;
}

.store .info .info p {
    text-align: center;
    font-size: 12px;
}

.store-tool div button {
    display: block;
    width: 98%;
    margin: 0 2%;
}
</style>
